<script setup>
import { ref } from 'vue'
import ApplicationWindow from '@/components/ApplicationWindow.vue'
import SlideList from '@/components/SlideList.vue'
import Loadingcomponent from '@/components/Loadingcomponent.vue'
import GameSwipe from './components/GameSwipe.vue'
import TheTop from '@/components/TheTop.vue'
import { fetchBannerList } from '@/api/game'
import { useToggle } from '@/use/useToggle'
const show = ref(false)
const showLoading = ref(true)
const showImg = (img) => {
  show.value = true
}
const coloseImg = (img) => {
  show.value = false
}
const [isSearchViewShown, toggleSearchView] = useToggle(false)
const data = ref({})
let list = [1, 2, 3, 4]
let slideArr = ['角色扮演', '动作角色', '模拟角色', '赛车竞速', '即时战略']
const windowURL = ref(
  'https://img1.baidu.com/it/u=2979077677,2364176659&fm=253&fmt=auto&app=120&f=JPEG?w=1280&h=800'
)
// 获取整个窗口的宽度
var windowWidth = window.outerWidth

let swipeWidth = windowWidth - 60
let bannerListData = ref([])
const getBannerList = async () => {
  let data = await fetchBannerList({})
  console.log(data, 'bannerListData')
  showLoading.value = false
  bannerListData.value = data
}
getBannerList()

// let bgColor = '#608D5D'
</script>
<template>
  <div class="home-page">
    <div v-show="!isSearchViewShown">
      <TheTop :recomments="data.searchRecomments" :itemTitil="$t('game')" />
      <!-- <SlideList style="margin-top: 8px" :slideArr="slideArr"> </SlideList> -->
      <!-- <div class="small-title">现已推出</div> -->
      <van-swipe class="my-swipe" indicator-color="white" :width="swipeWidth">
        <van-swipe-item v-for="(item, index) in bannerListData" :key="index" class="my-swipe-item">
          <ApplicationWindow
            style="margin-top: 10px; margin-right: 10px"
            :itemData="item"
            :showTitil="true"
          ></ApplicationWindow
        ></van-swipe-item>
      </van-swipe>

      <GameSwipe style="margin-top: 12px" :itemTitle="$t('Listgames')"></GameSwipe>
    </div>
    <van-dialog
      v-model:show="show"
      :showConfirmButton="false"
      class="van-dialog"
      closeOnClickOverlay="true"
    >
      <span class="close-icon-btn" @click="coloseImg()">
        <van-icon name="clear" />
      </span>
      <img :src="windowURL" style="width: 100%" />
    </van-dialog>

    <Loadingcomponent :showLoading="showLoading"></Loadingcomponent>
  </div>
</template>

<style lang="scss" scoped>
.home-page {
  background: var(--op-gray-bg-color);
  padding-bottom: 70px;
  background: #fff;
}
.van-dialog {
  position: relative;
  .close-icon-btn {
    position: absolute;
    top: 15px;
    right: 15px;
    // #1E2025
    color: #fff;
    font-size: 26px;
    // background: #fff;
  }
}
.wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.block {
  width: 120px;
  height: 120px;
  background-color: #fff;
}
.small-title {
  color: var(--van-button-primary-background);
  font-size: 10px;
  font-weight: bold;
  margin: 4px 0 0 0;
}
</style>
